<template>
  <!-- 你来这个世界多久了模板 -->
	<view class="eval-game-cover">
		<image :src="data.indexImgUrl" class="eval-bg" mode="widthFix"></image>
		<view class="input" v-if="typeId == 26">
			<picker
				mode="date"
				:value="date1"
				start="1900-01-01"
				end="2021-09-14"
				@change="bindDateChange"
				fields="day"
			>
				<view class="picker" style="font-size: 32rpx;color: #BFC0E0;">{{date ? date : '请选择你的出生日期'}}</view>
			</picker>
		</view>
		<view @click="skip" class="eval-skip">
			<image :src="data.BgImgUrl" class="eval-btn"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['typeId', 'gameId', 'data', 'list'],
		data() {
			return {
        date: "",
        date1: "2000-01-01",
			}
		},
		methods: {
			skip() {
        console.log(this.date);
        if(this.date == '') {
          tt.showToast({
            title: "请输入生日",
            duration: 2000,
          });
        } else {
					if(this.typeId == "26") {
						this.$emit('next', this.gameId)
            // let date = this.date.substr(5)
            console.log(this.date);
            getApp().globalData.gameInfo.birthdayDate = this.date
					}
        }
			},
			bindDateChange: function (e) {
				console.log("picker发送选择改变，携带值为", e.detail.value);
				this.date = e.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes dynamic {
		0% {
			transform: scale(0.85)
		}

		50% {
			transform: scale(1)
		}

		100% {
			transform: scale(0.85)
		}
	}

	.eval-game-cover {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

	.eval {
		&-bg {
			width: 100vw;
			height: 100vh;
		}

		&-skip {
			width: 400rpx;
			height: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 118rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn-default {
				width: 280rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				background-color: #48CFE5;
				color: #FFFFFF;
				font-size: 36rpx;
				border-radius: 45rpx;
				animation: 1s dynamic infinite;
			}
		}

		&-btn {
			width: 447rpx;
			height: 105rpx;
			position: absolute;
			// left: 50%;
			// top: 50%;
			transform: translate(-50%, -50%);
			animation: 1s dynamic infinite;
		}
	}

	.input {
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 446rpx;
		height: 100rpx;
		background: url(http://fcdn.qiushilaile.com/game/default-20651634643361108.png) no-repeat;
		background-size: 100% 100%;
	}

	.input picker {
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
</style>
